<template>
  <business-layout>
    <a-spin :spinning='loading'>
      <a-form-model :model='formModel' v-bind='formLayout' layout='vertical'>
        <h2 class='title'>导出数据报表：</h2>

        <!--        <a-form-model-item label='总体运行情况'>-->
        <!--          <a-textarea placeholder='请输入总体运行情况'-->
        <!--                      v-decorator="['moduleid']"-->
        <!--          ></a-textarea>-->
        <!--        </a-form-model-item>-->


        <a-form-model-item label='当前阶段运维存在的问题'>
          <a-row style='margin-bottom: 10px' :key='index' v-for='(_allProblemsItem, index) in formModel.allProblems'>
            <a-input v-model='formModel.allProblems[index]' placeholder='请输入当前阶段运维存在的问题'>
              <template slot='addonBefore'>
                {{ index + 1 }}、
              </template>
            </a-input>
          </a-row>
          <a-row>
            <a-button type='primary' @click='addAllProblems'>增加</a-button>
            <a-button type='danger' @click='removeAllProblems' v-if="formModel.allProblems.length > 0"
                      style='margin-left: 10px'>
              删除
            </a-button>
          </a-row>
        </a-form-model-item>

        <a-form-model-item label='总体运行情况'>
          <a-row style='margin-bottom: 10px' :key='index' v-for='(_allProblemsItem, index) in formModel.curProblems'>
            <a-input v-model='formModel.curProblems[index]' placeholder='请输入总体运行情况'>
              <template slot='addonBefore'>
                {{ index + 1 }}、
              </template>
            </a-input>
          </a-row>
          <a-row>
            <a-button type='primary' @click='addCurProblems'>增加</a-button>
            <a-button type='danger' @click='removeCurProblems' v-if="formModel.curProblems.length > 0"
                      style='margin-left: 10px'>
              删除
            </a-button>
          </a-row>
        </a-form-model-item>

        <a-row>
          <span style='display: inline-block;margin-right: 10px'>具体费用如下:</span>
        </a-row>

        <a-row style='margin:20px 0'>
          <a-descriptions layout='vertical' bordered :column='8'>
            <a-descriptions-item label='电费（元）'>
              <a-input v-model='formModel.eFee' placeholder='请输入电费' />
            </a-descriptions-item>
            <a-descriptions-item label='氢气费（元）'>
              <a-input v-model='formModel.hFee' placeholder='请输入氢气费' />
            </a-descriptions-item>
            <a-descriptions-item label='水费（元）'>
              <a-input v-model='formModel.wFee' placeholder='请输入水费' />
            </a-descriptions-item>
            <a-descriptions-item label='运费费用（元）'>
              <a-input v-model='formModel.mFee' placeholder='请输入运费费用' />
            </a-descriptions-item>
            <a-descriptions-item label='消耗品'>
              <a-input v-model='formModel.cFee' placeholder='请输入消耗品' />
            </a-descriptions-item>
            <a-descriptions-item label='运维工具费用（元）'>
              <a-input v-model='formModel.dFee' placeholder='请输入运维工具费用' />
            </a-descriptions-item>
            <a-descriptions-item label='其他（元）'>
              <a-input v-model='formModel.oFee' placeholder='请输入其他费用' />
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions layout='horizontal' bordered :column='2'>
            <a-descriptions-item label='费用合计(元)'>
              <a-input v-model='formModel.tFee' placeholder='请输入费用合计' />
            </a-descriptions-item>
          </a-descriptions>
          <a-row style='margin: 20px 0'>
            <a-date-picker  v-model='formModel.startTime' placeholder='请选择开始时间'valueFormat='YYYY-MM-DD 00:00:00'
                            format='YYYY-MM-DD 00:00:00'
                            :disabled-date='startDisabledDate'
                           name='startTime' />
            <a-date-picker  v-model='formModel.endTime' style='margin-left:10px'
                            format='YYYY-MM-DD 23:59:59'
                            :disabled-date='endDisabledDate'
                            valueFormat='YYYY-MM-DD 23:59:59'
                           placeholder='请选择结束时间' name='endTime' />
            <a-button type='primary' style="margin-left: 10px"  @click='handleQuery()'>查询</a-button>
            <span style="font-size: 12px">&nbsp;&nbsp;&nbsp;&nbsp; (选择开始结束时间、查询光伏总发电量、消费总电量)</span>
          </a-row>
          <a-descriptions layout='vertical' bordered>
            <a-descriptions-item label='光伏总发电量(度)'>
              {{ formModel.genTotal }}
            </a-descriptions-item>
            <a-descriptions-item label='消费总电量(度)'>
              {{ formModel.consumeTotal }}
            </a-descriptions-item>
          </a-descriptions>
        </a-row>

        <a-form-model-item label='分析'>
          <a-row style='margin-bottom: 10px' :key='index' v-for='(_adviseItem, index) in formModel.analysis'>
            <a-input v-model='formModel.analysis[index]' placeholder='请输入分析'>
              <template slot='addonBefore'>
                {{ index + 1 }}、
              </template>
            </a-input>
          </a-row>
          <a-row>
            <a-button type='primary' @click='addAnalysis'>增加</a-button>
            <a-button type='danger' @click='removeAnalysis' v-if="formModel.analysis.length > 0"
                      style='margin-left: 10px'>
              删除
            </a-button>
          </a-row>
        </a-form-model-item>

        <a-form-model-item label='建议'>
          <a-row style='margin-bottom: 10px'>
            <!--            <a-input v-model='formModel.advise[index]' placeholder='请输入长期规划'>-->
            <!--              <template slot='addonBefore'>-->
            <!--                {{ index + 1 }}、-->
            <!--              </template>-->
            <!--            </a-input>-->
            <a-input v-model='formModel.advise' placeholder='请输入您的建议' />

          </a-row>
          <!--          <a-row>-->
          <!--            <a-button type='primary' @click='addAdvise'>增加</a-button>-->
          <!--            <a-button type='danger' @click='removeAdvise' v-if="formModel.advise.length > 0" style='margin-left: 10px'>-->
          <!--              删除-->
          <!--            </a-button>-->
          <!--          </a-row>-->
        </a-form-model-item>

        <a-form-model-item label='短期调整'>
          <a-row style='margin-bottom: 10px' :key='index'
                 v-for='(_shorTermAdjustItem, index) in formModel.shorTermAdjust'>
            <a-input v-model='formModel.shorTermAdjust[index]' placeholder='请输入短期调整'>
              <template slot='addonBefore'>
                {{ index + 1 }}、
              </template>
            </a-input>
          </a-row>
          <a-row>
            <a-button type='primary' @click='addShorTermAdjust'>增加</a-button>
            <a-button type='danger' @click='removeShorTermAdjust' v-if="formModel.shorTermAdjust.length > 0"
                      style='margin-left: 10px'>
              删除
            </a-button>
          </a-row>
        </a-form-model-item>

        <a-form-model-item label='中期储备'>
          <a-row style='margin-bottom: 10px' :key='index'
                 v-for='(_middleTermStoreItem, index) in formModel.middleTermStore'>
            <a-input v-model='formModel.middleTermStore[index]' placeholder='请输入中期储备'>
              <template slot='addonBefore'>
                {{ index + 1 }}、
              </template>
            </a-input>
          </a-row>
          <a-row>
            <a-button type='primary' @click='addMiddleTermStore'>增加</a-button>
            <a-button type='danger' @click='removeMiddleTermStore' v-if="formModel.middleTermStore.length > 0"
                      style='margin-left: 10px'>
              删除
            </a-button>
          </a-row>
        </a-form-model-item>

        <a-form-model-item label='长期规划'>
          <a-row style='margin-bottom: 10px' :key='index' v-for='(_longTermPlanItem, index) in formModel.longTermPlan'>
            <a-input v-model='formModel.longTermPlan[index]' placeholder='请输入长期规划'>
              <template slot='addonBefore'>
                {{ index + 1 }}、
              </template>
            </a-input>
          </a-row>
          <a-row>
            <a-button type='primary' @click='addLongTermPlan'>增加</a-button>
            <a-button type='danger' @click='removeLongTermPlan' v-if="formModel.longTermPlan.length > 0"
                      style='margin-left: 10px'>
              删除
            </a-button>
          </a-row>
        </a-form-model-item>

        <a-form-model-item>
          <div class='btns'>
            <a-button type='primary' @click="handleSubmit">确定</a-button>
            <a-button html-type='reset' style='margin-left: 20px'>重置</a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </business-layout>
</template>

<script>
import { mapState } from 'vuex'
import { deleteoperation, totalElecGenAndComsume } from '@/api/dataExport'
import { downloadAvatar } from '@/api/workerOrder'
import moment from 'moment'

// 表单字段
const fields = [
  'allProblems', // 所有问题
  'curProblems', // 当前问题
  'startTime',// 开始时间
  'endTime', // 结束时间
  'eFee', // 电费
  'hFee', // 氢气费
  'wFee', // 水费
  'mFee', // 运费费用
  'cFee', // 消耗品
  'dFee', // 运维工具费用
  'oFee', // 其它费用
  'tFee', // 总费用
  'genTotal', // 光伏总发电量
  'consumeTotal', // 消费总电量
  'analysis', // 分析
  'advise', // 建议
  'shorTermAdjust',// 短期调整
  'middleTermStore', // 中期储备
  'longTermPlan' // 长期规划
]

export default {
  components: {},
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      }
    }
    return {
      formModel: {
        curProblems: [''],
        allProblems: [''],
        analysis: [''],
        advise: '',
        shorTermAdjust: [''],
        middleTermStore: [''],
        longTermPlan: [''],
        startTime: '',
        endTime: '',
        eFee: '',
        hFee: '',
        wFee: '',
        mFee: '',
        cFee: '',
        dFee: '',
        genTotal: '',
        consumeTotal: ''

      },
      rules: {
        // startTime: [{ required: true, message: '请选择开始时间！' }],
        // endTime: [{ required: true, message: '请选择结束时间' }]
      },
      form: this.$form.createForm(this),
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 21, offset: 3 }
        }
      },
      systemList: [],
      deviceList: [],
      pointList: [],
      loading: false
    }
  },
  computed: {
    ...mapState({
      moduleList: state => state.dataDicInfo.modules.map(item => {
        return {
          ...item,
          key: item.code,
          label: item.name
        }
      })
    })
  },
  created() {
    // this.form.getFieldDecorator('shorTermAdjust', { initialValue: [''], preserve: true })
    // this.form.getFieldDecorator('middleTermStore', { initialValue: [''], preserve: true })
    // this.form.getFieldDecorator('longTermPlan', { initialValue: [], preserve: true })
    // console.log(this.form.getFieldValue('longTermPlan'))
  },
  methods: {
    startDisabledDate(startValue) {
      const endValue = this.formModel.endTime
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate(endValue) {
      const startValue = this.formModel.startTime
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    handleQuery() {
      if (!this.formModel.startTime || !this.formModel.endTime) {
        this.$message.warning('请选择时间')
        return
      }
      totalElecGenAndComsume({
        startTime: this.formModel.startTime,
        endTime: this.formModel.endTime
      }).then(res => {
        if(res){
          this.formModel.consumeTotal = res.consumeTotal.toString()
          this.formModel.genTotal = res.genTotal.toString()
        }
      })
    },
    handleSubmit() {
      console.log(this.formModel.genTotal, 'this.formModel.genTotal')
      console.log(this.formModel.consumeTotal, 'this.formModel.consumeTotal')
      if (!this.formModel.genTotal || !this.formModel.consumeTotal) {
        this.$message.warning('请设置查询时间并查询光伏总发电量、消费总电量!')
        return
      }
      deleteoperation(this.formModel).then(res => {
        window.open(downloadAvatar({ fileName: res }))
      })
    },
    handleAdd() {

    },
    addCurProblems() {
      this.formModel.curProblems.push('')
    },
    removeCurProblems() {
      this.formModel.curProblems.pop()
    },
    addAllProblems() {
      this.formModel.allProblems.push('')
    },
    removeAllProblems() {
      this.formModel.allProblems.pop()
    },
    addAnalysis() {
      this.formModel.analysis.push('')
    },
    removeAnalysis() {
      this.formModel.analysis.pop()
    },
    addAdvise() {
      this.formModel.advise.push('')
    },
    removeAdvise() {
      this.formModel.advise.pop()
    },
    addShorTermAdjust() {
      this.formModel.shorTermAdjust.push('')
    },
    removeShorTermAdjust() {
      this.formModel.shorTermAdjust.pop()
    },
    addMiddleTermStore() {
      this.formModel.middleTermStore.push('')
    },
    removeMiddleTermStore() {
      this.formModel.middleTermStore.pop()
    },
    addLongTermPlan() {
      this.formModel.longTermPlan.push('')
    },
    removeLongTermPlan() {
      this.formModel.longTermPlan.pop()
    }
  }
}
</script>

<style lang='less' scoped>
.title {
  padding-bottom: 30px;
}

.btns {
  display: flex;
  justify-content: center;
}
</style>